<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
<!--    <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon" />-->
</head>
<script type="text/javascript" src="../js/vue.js"></script>
<body>
<div id="root">
    <h2>列表信息</h2>
<input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType=2">年龄升序</button>
    <button @click="sortType=1">年龄降序</button>
    <button @click="sortType=0">原顺序</button><br>
    <button @click="updateMei">更新马冬梅的信息</button>
    <ul>
<!--        遍历数组-->
        <li v-for="p in filPersons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
<!--        遍历对象-->
<!--        <li v-for="(a,b) of cars" :key="b">-->
<!--         {{b}}-{{a}}-->
<!--        </li>-->
    </ul>
    <hr>
    <h1>学生信息</h1>
    <h2>姓名：{{student.name}}</h2>
    <h2>年龄：{{student.age}}</h2>
    <h2>地址：{{student.address}}</h2>
    <h2 v-if="student.sex">性别：{{student.sex}}</h2>
    <ul>
        <li v-for="(s,index) in student.friends" :key="index">
            {{s.name}}-{{s.age}}-{{s.address}}
        </li>
        <button @click="addSex">增加性别属性，默认没有</button>
    </ul>
    <h2>爱好</h2>
    <ul>
        <li v-for="(h,index) in student.hobby" :key="index">
            {{h}}
        </li>
    </ul>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            keyWord:'',
            sortType:0,//0代表原顺序，1代表降序，2代表升序
            persons:[
                {id:'001',name:'马冬梅',age:'18',sex:'男'},
                {id:'002',name:'周冬雨',age:'30',sex:'男'},
                {id:'003',name:'周杰伦',age:'20',sex:'女'},
                {id:'004',name:'温伦',age:'90',sex:'女'}

            ],
            // filPersons:[],
            cars:{
                name:'宝马五系',
                price:'50万'
            },
            student:{
                name:'小王',
                age:19,
                address:'四川',
                friends:[
                {name:'宋东野',age:'45',address:'北京'},
                {name:'马頔',age:'43',address:'天津'},
                {name:'陈粒',age:'32',address:'哈尔滨'},
                {name:'尧十三',age:'35',address:'上海'}
                ],
                hobby:['喝酒','吸烟','烫头']
    }
        },
        // 监视实现代码
        // watch:{
        //     keyWord:{
        //         immediate:true,
        //         handler(val) {
        //             this.filPersons=this.persons.filter((p)=>{
        //                 return  p.name.indexOf(val) !== -1
        //             })
        //         }
        //     }
        // },
        computed:{
            filPersons(){
               const arr= this.persons.filter((p)=>{
                   return  p.name.indexOf(this.keyWord) !== -1
               })
                if(this.sortType){
                  arr.sort((p1,p2)=>{
                      return this.sortType === 1 ? p2.age-p1.age :p1.age-p2.age
                  })
                }
                return arr
            }
        },
        methods:{
            updateMei(){
                // 奏效
                // this.persons[0].name='马老师'
                // this.persons[0].age='50'
                // this.persons[0].sex='男'
                this.persons.splice(0,1,{id:'001',name:'马老师',age:'50',sex:'男'})
            },
            addSex(){
                Vue.set(this.student,'sex','男')
            }
        }
    })
</script>
</html>